<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css"
		href="#{request.contextPath}/style/default.css" media="screen" />
	<link rel="shortcut icon"
		href="#{request.contextPath}/imgs/favicon.ico" type="image/x-icon" />

	<script type="text/javascript"
		src="#{request.contextPath}/js/jquery.format-1.2.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/js/Util.js"></script>
	<title>#{lbls.LBL_0080}</title>


	<style type="text/css">
.colDir {
	text-align: right;
}

.colEsq {
	text-align: left;
}

.nomeUsuario {
	font-weight: bold;
}

.divHeader {
	width: 99%;
	float: right;
}

a:link,a:visited {
	text-decoration: none
}

a:hover {
	text-decoration: underline;
}

a:active {
	text-decoration: none
}

.botaoRadape {
	margin-top: 15px;
	height: 30px;
}

.iconMenuCentro {
	padding: 0px 10px 0px 10px;
}

.descProduto {
	font-weight: bold;
	font-size: 30px;
}

.ui-datatable .ui-datatable-data .even-row td {
	background-color: #F7F7F7;
}

.ui-datatable .ui-datatable-data .odd-row td {
	background-color: #F2F2F2;
}
</style>

	<script type="text/javascript">
		//<![CDATA[
		$(document).ready(function(){

		    $.format.locale({
		        number: {
		            groupingSeparator: '.',
		            decimalSeparator: ','
		        }
		    });
			
		    jQuery('input[type=text][id$=Valor]').bind('keypress',function (e){
			  
				/**
				 * Permite que sejam digitados apenas valores numericos ao campo.
				 */
		         var tecla = [e.which || e.keyCode];
		         alert(tecla);
				 if(tecla == null || tecla == 'undefined'){
				  return true; 
				 }

				 if (tecla == 8){ // backspace
				  return true;  
				 }

				 // numeros de 0 a 9
				 if( (tecla > 47 && tecla < 58) 
				   || (tecla.value == 'undefined')){
				  return true;  
				 }
				 e.preventDefault();
			});

		});

		function calcularTroco(valorRecebido){
			var txtTroco = $("#form2\\:txtTroco");
			
			var valorTotal = $("#form2\\:txtValorTotalVenda").val();
			
			valorRecebido = valorRecebido.replace(".","").replace(",","."); 
			valorTotal = valorTotal.replace(",",".").replace(",","."); 
			
			var valorTroco = Number(valorRecebido - valorTotal);

			if (valorTroco > 0){
				var valorFormatado = $.format.number( valorTroco, '#,##0.00');
				txtTroco.val(valorFormatado);
			} else {
				txtTroco.val('');
			}
			
		}
		function copiarValorTotal(){

			var valorVenda = $("#totalVendaHidden").val();
			if (valorVenda != null){
				var valorFormatado = $.format.number(Number(valorVenda), '#,##0.00');
				$("input[type=text][id$=txtValorTotalVenda]").val(valorFormatado);
			}
		}
		
		function enviarFormaPagamentoRemover(codFormaPgto){
			$("#form2\\:rowFormPgtoRemover").val(codFormaPgto);
		}


		function limparCamposFormaPagamento(){
			$("#form2\\:tabFormPgto\\:txtValorRecebidoValor").val('');
			$("#form2\\:tabFormPgto\\:txtTroco").val('');
		}

		function clickBtnAdicionar(comp){
		
			var valor = comp.value;	
			if (typeof valor != 'undefined' && valor.length == 13){
				$("#btnAdd").click();
			}
		}

		function calcularValorParcela(){
			var qtdaParcela = $("input[type=text][id$=txtQtdaParc]").val();
			var valorTotal = $("input[type=text][id$=txtValorTotalVenda]").val();

			valorTotal = valorTotal.replace(".","").replace(",",".")

			if (qtdaParcela > 0 && valorTotal > 0){

				var valorParc = valorTotal / qtdaParcela;
				if (valorParc > 0){
					var valorFormatado = $.format.number(Number(valorParc), '#,##0.00');
					$("input[type=text][id$=txtValorParc]").val(valorFormatado);
				} else {
					$("input[type=text][id$=txtValorParc]").val('');
				}
				
			} else {
				$("input[type=text][id$=txtValorParc]").val('');
			}
		}
		
		//]]>
		</script>
</h:head>
<h:body>

	<p:layout fullPage="true">

		<p:layoutUnit position="north" size="30" closable="false"
			collapsible="true">

<h:form id="formHeader" prependId="false">
			<table width="100%" border="0" cellpadding="0" cellspacing="0">
				<tr>

					<td width="33%"><p:graphicImage url="/imgs/gears.png" /> <p:commandLink
							action="administracao">
							<h:outputText value="#{lbls.LBL_0081}" />
						</p:commandLink></td>
					<td align="center" width="33%"><h:outputText
							value="#{vendaProdutoMB.dataAtual}">
							<f:convertDateTime
								pattern="EEEEE, d 'de' MMMMM 'de' yyyy - HH:mm" />
						</h:outputText></td>
					<td align="right"><h:outputText value="#{lbls.LBL_0082}: " />
						<h:outputText styleClass="nomeUsuario"
							value="Vinicius Pereira Silva" /> <a> <p:graphicImage
								url="/imgs/logout.png" width="16" /> <h:outputText
								value="(#{lbls.LBL_0085})" /></a></td>
				</tr>
			</table>
</h:form>
		</p:layoutUnit>

		<p:layoutUnit position="south" size="90" resizable="false"
			closable="false">

			<h:form id="formFooter">

				<table border="0" cellpadding="0" cellspacing="0" width="100%">

					<tr>
						<td class="iconMenuCentro" align="left" width="1%"><p:commandLink
								action="vendaProduto" ajax="false" immediate="true">
								<p:graphicImage url="/imgs/clear.png" />
								<br />
								<h:outputText value="#{lbls.LBL_0003}" />
							</p:commandLink></td>
						<td align="center" valign="middle"><h:outputText
								value="#{vendaProdutoMB.produto.descricao}"
								styleClass="descProduto" id="produto" /></td>
						<td class="iconMenuCentro" align="right" width="1%"><p:commandLink
								update=":form2:modalPagto" process="@this"
								oncomplete="modalPagamento.show(); copiarValorTotal();">
								<p:graphicImage url="/imgs/carrinho.png" />
								<br />
								<h:outputText value="#{lbls.LBL_0050}" />
							</p:commandLink></td>
					</tr>
				</table>
			</h:form>
		</p:layoutUnit>

		<p:layoutUnit position="center">

			<h:form id="form1" prependId="false">
				<p:growl id="growl" showDetail="false" autoUpdate="true" />
				<h:inputHidden id="totalVendaHidden"
					value="#{vendaProdutoMB.venda.valor}" />

				<p:layout style="min-width:400px;min-height:350px;" id="layout"
					stateful="true">

					<p:layoutUnit position="center" header="#{lbls.LBL_0083}"
						resizable="true">

						<p:dataTable value="#{vendaProdutoMB.venda.listaItemVenda}"
							rowStyleClass="#{empty rowIx or rowIx mod 2 ne 0 ? 'even-row' : 'odd-row'}" rowIndexVar="rowIx"  emptyMessage="#{lbls.LBL_0004}"
							id="dataListItens" var="itemVenda">
							<p:column>
								<f:facet name="header">
									<h:outputText value="#{lbls.LBL_0047}" />
								</f:facet>
								<h:outputText value="#{itemVenda.produto.descricao} - " />
								<h:outputText value="#{itemVenda.produto.valorVenda}">
									<f:convertNumber type="currency" />
								</h:outputText>

							</p:column>

							<p:column styleClass="colDir" style="width: 35px;">
								<f:facet name="header">
									<h:outputText value="#{lbls.LBL_0048}" />
								</f:facet>
								<h:outputText value="#{itemVenda.quantidade}" />
							</p:column>

							<p:column styleClass="colDir" style="width: 80px;">
								<f:facet name="header">
									<h:outputText value="#{lbls.LBL_0049}" />
								</f:facet>
								<h:outputText
									value="#{itemVenda.produto.valorVenda * itemVenda.quantidade}">
									<f:convertNumber type="currency" />
								</h:outputText>
							</p:column>

							<p:column style="width:1%;">

								<p:commandButton icon="ui-icon-circle-close" id="btnRemoverItem"
									update="@form" process="@this"
									action="#{vendaProdutoMB.doRemoverItemVendaAction}">
									<f:setPropertyActionListener
										target="#{vendaProdutoMB.itemVenda}" value="#{itemVenda}" />
								</p:commandButton>
							</p:column>

						</p:dataTable>
					</p:layoutUnit>

					<p:layoutUnit position="east" size="300">
						<p:outputPanel id="panelDadosItem">

							<table width="100%" border="0" cellpadding="0" cellspacing="5">
								<tr>
									<td><h:outputLabel value="#{lbls.LBL_0005}:"
											for="txtCodBarrasProd" /></td>
									<td colspan="2"><p:inputText id="txtCodBarrasProd"
											style="width: 199px;" maxlength="13"
											onblur="clickBtnAdicionar(this);"
											value="#{vendaProdutoMB.codBarras}">
											
										</p:inputText></td>
								</tr>
								<tr>
									<td><h:outputLabel value="#{lbls.LBL_0035}:"
											for="txtProduto" /></td>
									<td colspan="2"><p:autoComplete id="txtProduto" label="#{lbls.LBL_0035}"
											forceSelection="true" queryDelay="300" var="produto"
											itemLabel="#{produto.descricao}" itemValue="#{produto.id}"
											size="24" style="width:150px;"
											value="#{vendaProdutoMB.itemVenda.produto}"
											minQueryLength="3" converter="produtoAutoCompleteConverter"
											completeMethod="#{vendaProdutoMB.buscarProduto}" >
											<f:validateBean disabled="true" for="txtProduto"/>
											
											</p:autoComplete></td>
								</tr>

								<tr>
									<td></td>
									<td align="right"><p:spinner size="2" min="0"
											id="qtdaItem" value="#{vendaProdutoMB.itemVenda.quantidade}" />
									</td>
									<td align="right"><p:commandButton id="btnAdd"
											value="#{lbls.LBL_0084}" process="@this txtProduto qtdaItem txtCodBarrasProd"
											update="panelDadosItem dataListItens txtTotalVenda totalVendaHidden :formFooter:produto"
											icon="ui-icon ui-icon-arrowreturnthick-1-s"
											action="#{vendaProdutoMB.doAdicionarItemVendaAction}" /></td>
								</tr>
							</table>

						</p:outputPanel>

						<div style="position: relative; top: 60px; text-align: right;">
							<h:outputText value="#{lbls.LBL_0049}: " />
							<h:outputText id="txtTotalVenda"
								style="font:bold 25px arial,sans-serif;"
								value="#{vendaProdutoMB.venda.valor}">
								<f:convertNumber type="currency" />
							</h:outputText>
						</div>
					</p:layoutUnit>
				</p:layout>

			</h:form>
			<h:form id="form2">

				<h:inputHidden id="rowFormPgtoRemover"
					value="#{vendaProdutoMB.rowFormPgtoRemover}" />

				<p:dialog modal="true" resizable="false" width="400" height="390"
					draggable="false" closable="false" header="#{lbls.LBL_0051}"
					id="modalPagto" widgetVar="modalPagamento" appendToBody="true">

					<p:panel id="panelDadosPagto">

						<p:selectOneButton id="cmbFormaPgto" style="margin-left: 3px;"
							value="#{vendaProdutoMB.formaPagamento.tipoPagamento}">
							<f:selectItems value="#{vendaProdutoMB.listaTipoPagamento}" />
							<p:ajax update="gridDadosPgtos" />
						</p:selectOneButton>

						<h:panelGrid columns="2" id="gridDadosPgtos"
							style="margin-top:10px;">

							<p:outputLabel value="#{lbls.LBL_0049}:" for="txtValorTotalVenda" />
							<p:inputText size="5" id="txtValorTotalVenda"
								style="font:bold 15px arial,sans-serif;" maxlength="6"
								value="#{vendaProdutoMB.formaPagamento.valorTotal}"
								onkeypress="return FormataMoeda(this, 2, event);"
								onkeyup="return FormataMoeda(this, 2, event)"
								onblur="return mascaraMoeda(this,2,event)">
								<f:convertNumber pattern="#,##0.00" minFractionDigits="2" />
							</p:inputText>

							<p:outputLabel value="#{lbls.LBL_0053}:"
								rendered="#{vendaProdutoMB.formaPagtoDinheiro}"
								for="txtValorRecebidoValor" />
							<p:inputText size="5" id="txtValorRecebidoValor" maxlength="6"
								rendered="#{vendaProdutoMB.formaPagtoDinheiro}"
								onkeypress="return FormataMoeda(this, 2, event);"
								onkeyup="return FormataMoeda(this, 2, event)"
								onblur="calcularTroco(this.value);return mascaraMoeda(this,2,event)" />

							<p:outputLabel value="#{lbls.LBL_0054}:" for="txtTroco"
								rendered="#{vendaProdutoMB.formaPagtoDinheiro}" />
							<p:inputText size="5" id="txtTroco" readonly="true"
								rendered="#{vendaProdutoMB.formaPagtoDinheiro}" />


							<p:outputLabel value="#{lbls.LBL_0055}:" for="txtQtdaParc"
								rendered="#{vendaProdutoMB.formaPagtoCredito or  vendaProdutoMB.formaPagtoCheque}" />
							<h:panelGroup
								rendered="#{vendaProdutoMB.formaPagtoCredito or  vendaProdutoMB.formaPagtoCheque}">
								<p:inputText size="1" id="txtQtdaParc" label="#{lbls.LBL_0055}"
									onkeyup="return FormataNumero(this);"
									onkeypress="return FormataNumero(this);"
									onblur="calcularValorParcela();return FormataNumero(this); "
									value="#{vendaProdutoMB.formaPagamento.qtdaParcelas}" />
								<h:outputText value=" x " />
								<p:inputText id="txtValorParc" size="3" readonly="true" />
							</h:panelGroup>

							<p:outputLabel value="#{lbls.LBL_0077}:" for="txtObsVenda"
								rendered="#{vendaProdutoMB.formaPagtoPrazo}" />
							<p:inputText id="txtObsVenda" maxlength="50" size="30"
								rendered="#{vendaProdutoMB.formaPagtoPrazo}"
								value="#{vendaProdutoMB.formaPagamento.observacao}" />

						</h:panelGrid>

						<f:facet name="footer">
							<p:spacer height="25px" />
							<p:commandButton id="btnAddFormaPgto" value="#{lbls.LBL_0009}"
								process="@this gridDadosPgtos"
								update="panelDadosPagto :form2:formaPgtoDataTable :form2:btnSalvarVenda"
								action="#{vendaProdutoMB.doAdicionarFormaPagamento}"
								disabled="#{not ((empty vendaProdutoMB.valorRestante) or (vendaProdutoMB.valorRestante gt 0)) }"
								icon="ui-icon-plus" style="float: right;" />
						</f:facet>
					</p:panel>

					<p:spacer height="10px" />

					<p:dataTable id="formaPgtoDataTable" var="formaPgto"
						paginator="false" style="width:100%" rowIndexVar="row"
						emptyMessage="#{lbls.LBL_0004}" rows="4"
						value="#{vendaProdutoMB.venda.listaFormasPagamento}">

						<p:column>
							<h:outputText value="#{formaPgto.tipoPagamento.descricao}" />
							<f:facet name="footer">
								<h:outputText value="#{lbls.LBL_0075}:" />
							</f:facet>
						</p:column>

						<p:column style="width:1%;">
							<h:outputText value="#{formaPgto.qtdaParcelas}" />
						</p:column>

						<p:column style="width:100px;">
							<h:outputText value="#{formaPgto.valorParcela}">
								<f:convertNumber type="currency" />
							</h:outputText>
						</p:column>

						<p:column style="width:100px;">
							<h:outputText value="#{formaPgto.valorTotal}">
								<f:convertNumber type="currency" />
							</h:outputText>
							<f:facet name="footer">
								<h:outputText value="#{vendaProdutoMB.valorRestante }">
									<f:convertNumber type="currency" />
								</h:outputText>
							</f:facet>
						</p:column>

						<p:column style="width:1%;">
							<p:commandButton id="btnDelFormPgto" icon="ui-icon-trash"
								onclick="enviarFormaPagamentoRemover(#{row})" process="@this"
								oncomplete="$('#form2\\:btnDelFormPgtoAux').click();">
							</p:commandButton>

						</p:column>

					</p:dataTable>

					<f:facet name="footer">
						<div>
							<p:commandButton value="#{lbls.LBL_0015}" type="button"
								onclick="modalPagamento.hide();" icon="ui-icon-cancel" />

							<p:commandButton id="btnSalvarVenda" value="#{lbls.LBL_0056}"
								icon="ui-icon-check"
								disabled="#{(empty vendaProdutoMB.valorRestante) or (vendaProdutoMB.valorRestante gt 0) }"
								update="formaPgtoDataTable :form1:panelDadosItem :form1:dataListItens :form1:totalVendaHidden :formFooter:produto"
								action="#{vendaProdutoMB.doSalvarAction}"
								process="@this btnDelFormPgtoAux"
								oncomplete="modalPagamento.hide(); limparCamposFormaPagamento();"
								style="float: right;" />
						</div>
					</f:facet>
					<p:commandButton id="btnDelFormPgtoAux" style="display: none;"
						action="#{vendaProdutoMB.doRemoverFormaPagamento}"
						oncomplete="limparCamposFormaPagamento();"
						update="form2:formaPgtoDataTable btnSalvarVenda btnAddFormaPgto"
						process="@this, rowFormPgtoRemover">
					</p:commandButton>
				</p:dialog>
			</h:form>

		</p:layoutUnit>

	</p:layout>

</h:body>

</html>